import React, { useEffect } from "react"
import { useOutlet } from "react-router-dom"
import Header from "./Header"
import { ConfigProvider } from "esy-ui"
import { useChangeTheme } from "@/hooks"
import { esyUiClassNames } from "@/styles/esy-ui"
import Menu from "./Menu"
import MenuTip from "./MenuTip"

ConfigProvider.setConfig({ classNames: esyUiClassNames })

function Layouts() {
    const currentOutlet = useOutlet()
    const { initTheme } = useChangeTheme()

    useEffect(() => {
        initTheme()
    }, [initTheme])

    return (
        <ConfigProvider classNames={esyUiClassNames} componentSize="mini">
            <Header />
            <div className="flex-1 flex flex-col md:flex-row md:max-h-[calc(100vh-40px)]">
                <Menu />
                <div className="flex-1 flex flex-col overflow-y-scroll py-2 mx-3 md:pt-8 md:pb-6 md:mx-14">{currentOutlet}</div>
                <MenuTip />
            </div>
        </ConfigProvider>
    )
}

export default Layouts
